<template>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body @close="close">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="端口号" prop="port">
                <el-input-number v-model="form.port" placeholder="请输入内容"
                                 :min="0" :max="65535"></el-input-number>
            </el-form-item>
            <el-form-item label="IO类型" prop="ioType">
                <el-select v-model="form.ioType">
                    <el-option label="nio" value="nio"></el-option>
                    <el-option label="oio" value="oio"></el-option>
                    <el-option label="epoll" value="epoll"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="前置编解码器" prop="preCodec">
                <el-input v-model="form.preCodec" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="后置编解码器" prop="postCodec">
                <el-input v-model="form.postCodec" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="拆包方式" prop="decoderWay">
                <el-select v-model="form.decoderWay">
                    <el-option label="定长" value="定长"></el-option>
                    <el-option label="换行符" value="换行符"></el-option>
                    <el-option label="分隔符" value="分隔符"></el-option>
                    <el-option label="长度域" value="长度域"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拆包配置" prop="decoder">
                <el-input v-model="form.decoder" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="自己定义的编解码器" prop="myHandlerWay">
                <el-select v-model="form.myHandlerWay">
                    <el-option label="点位" value="point"></el-option>
                    <el-option label="json" value="json"></el-option>
                    <el-option label="websocket" value="websocket"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {addTcpDriver, updateTcpDriver, getDriverById} from "/src/api/driver/tcp";

    export default {
        name: "update",
        emits: ['dialogStatusChanged'],
        props: {
            open: Boolean,
            title: String,
            driverId: Number,
        },
        computed: {
            //监测页面开关
            monitorOpenStatus() {
                return this.open
            },
        },
        watch: {
            monitorOpenStatus(val) {
                if(val){
                    getDriverById(this.driverId).then(res => {
                        if (res.data) {
                            this.form = res.data
                        }
                    })
                }
            }
        },
        data() {
            return {
                form: {},
                // 表单校验
                rules: {
                    port: [
                        {required: true, message: "端口号不能为空", trigger: "blur"}
                    ],
                    ioType: [
                        {required: true, message: "IO类型不能为空", trigger: "blur"}
                    ],
                    preCodec: [
                        {required: true, message: "前置编解码器不能为空", trigger: "blur"}
                    ],
                    postCodec: [
                        {required: true, message: "后置编解码器不能为空", trigger: "blur"}
                    ],
                    decoderWay: [
                        {required: true, message: "拆包方式不能为空", trigger: "blur"}
                    ],
                    decoder: [
                        {required: true, message: "拆包配置不能为空", trigger: "blur"}
                    ],
                    myHandlerWay: [
                        {required: true, message: "自己定义的编解码器不能为空", trigger: "blur"}
                    ]
                }
            }
        },
        methods: {
            //提交
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.driverId != undefined) {
                            updateTcpDriver(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.close();
                            });
                        } else {
                            addTcpDriver(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.close();
                            });
                        }
                    }
                })
            },
            //取消
            cancel() {
                this.$emit('dialogStatusChanged', false)
            },
            //关闭
            close() {
                this.$emit('dialogStatusChanged', false)
            }
        }
    }
</script>

<style scoped>

</style>
